class BeeDrag extends Phaser.Scene {

    constructor() {
        super({ key: 'BeeDrag' });
    }



    preload() {
        this.load.image('background', './assets/backgroundPic.jpg');
        this.load.atlas('arrows', './assets/arrows.png', './assets/arrows.json');
        this.load.image('beeBody', './assets/beeCompo/中华蜜蜂-身体.png');
        this.load.image('part1', './assets/beeCompo/中华蜜蜂-前足.png');
        this.load.image('part2', './assets/beeCompo/中华蜜蜂-翅膀1.png');
        this.load.image('part3', './assets/beeCompo/中华蜜蜂-中足.png');
        this.load.image('part4', './assets/beeCompo/中华蜜蜂-后足.png');
        this.load.image('part5', './assets/beeCompo/中华蜜蜂-翅膀2.png');
        this.load.spritesheet('dude', 'assets/dude.png', { frameWidth: 32, frameHeight: 48 });
    }

    create() {
        // 设置背景图片，并进行居中和缩放
        const { width, height } = game.config;
        const bg = this.add.image(0, 0, 'background');
        bg.setOrigin(0, 0).setScale(width / bg.width, height / bg.height);
        bg.setAlpha(0.4);
        // 顶部导航条
        this.add.rectangle(0, 0, width, 70, 0xffda70).setOrigin(0, 0);
        // 添加顶部导航箭头
        const atlasTexture = this.textures.get('arrows');
        const frames = atlasTexture.getFrameNames();
        const arrowBack = this.add.image(35, 35, 'arrows', frames[2]).setOrigin(0, 0.5).setScale(1.4);
        const arrowForward = this.add.image(width - 30, 35, 'arrows', frames[1]).setOrigin(1, 0.5).setScale(1.4);
        // 设置点击事件
        arrowBack.setInteractive().on('pointerdown', function(pointer, localX, localY, event) {
            console.log(pointer, localX, localY, event);
        });
        arrowForward.setInteractive().on('pointerdown', function(pointer, localX, localY, event) {
            console.log(pointer, localX, localY, event);
        });
        // 添加 洋葱头
        // The this.player and its settings
        this.player = this.physics.add.sprite(100, 100, 'dude').setScale(1.5);
        //  this.player physics properties. Give the little guy a slight bounce.
        this.player.setBounce(1);
        this.player.setCollideWorldBounds(true);
        this.player.setVelocity(100, 200);
        //  Our this.player animations, turning, walking left and walking right.
        this.anims.create({
            key: 'left',
            frames: this.anims.generateFrameNumbers('dude', { start: 0, end: 3 }),
            frameRate: 10,
            repeat: -1
        });

        this.anims.create({
            key: 'turn',
            frames: [{ key: 'dude', frame: 4 }],
            frameRate: 20
        });

        this.anims.create({
            key: 'right',
            frames: this.anims.generateFrameNumbers('dude', { start: 5, end: 8 }),
            frameRate: 10,
            repeat: -1
        });

        // this.playerDirection = 'right'
        this.player.anims.play('right', true);
        // 添加精灵，并且设置拖动
        const beeBody = this.add.sprite(1050, 423, 'beeBody').setScale(0.956).setDepth(1);
        // enableDrag(beeBody)
        const beeParts = this.physics.add.staticGroup();
        beeParts.add(beeBody)
        beeParts.add(enableDrag(this.add.sprite(413, 208, 'part1').setScale(0.8), { x: 1055, y: 309 }, 20))
        beeParts.add(enableDrag(this.add.sprite(413, 323, 'part2').setScale(0.64), { x: 1055, y: 390 }, 20))
        beeParts.add(enableDrag(this.add.sprite(413, 395, 'part3'), { x: 1055, y: 409 }, 20))
        beeParts.add(enableDrag(this.add.sprite(413, 492, 'part4').setScale(0.8), { x: 1055, y: 482 }, 20))
        beeParts.add(enableDrag(this.add.sprite(413, 628, 'part5').setScale(0.8), { x: 1055, y: 422 }, 20))
        this.physics.add.collider(this.player, beeParts);
        // this.physics.add.collider(
        //     this.player,
        //     this.physics.world,
        //     function(_player, _world) {
        //         console.log(_world.body.touching);
        //         // if (_player.body.touching.up && _platform.body.touching.down)
        //         // {
        //         //     createStar(
        //         //         _player.body.center.x,
        //         //         _platform.body.top - 16,
        //         //         _player.body.velocity.x,
        //         //         _player.body.velocity.y * -3
        //         //     );
        //         // }
        //     });
    }

    update() {
        // if (this.physics.world.checkCollision.left) {
        //     console.log('this.player.body.touching.left');
        //     this.player.anims.play('right', true);
        // } else if (this.physics.world.checkCollision.right) {
        //     console.log('this.player.body.touching.right');
        //     this.player.anims.play('left', true);
        // }
    }
}

//  设置target在移动端和电脑端拖动
//  target 为gameObject;
//  targetPos为目标位置
//  threshold为接近目标位置的距离
//  如果拖动到目标位置附近则，则设置目标位置为target的坐标，否则弹回
function enableDrag(target, targetPos, threshold) {
    // 记录原始位置，用来弹回
    target.originPos = { x: target.x, y: target.y };
    target
        .setInteractive()
        .on('pointerdown', function(pointer) {
            this.currentPos = { x: this.x, y: this.y };
            this.targetPos = targetPos;
            this.setDepth(9);
        })
        .on('pointermove', function(pointer) {
            this.currentPos && this.setPosition(this.currentPos.x + pointer.x - pointer.downX, this.currentPos.y + pointer.y - pointer.downY);
        })
        .on('pointerup', function(pointer) {

            if (this.currentPos) {
                console.log(this);
                isTargetPosition(targetPos, { x: this.x, y: this.y }, threshold) ? this.setPosition(this.targetPos.x, this.targetPos.y) : this.setPosition(this.originPos.x, this.originPos.y);
                this.setDepth(0);
                this.currentPos = null;
            }
        })
        .on('pointerout', function(pointer) {
            if (this.currentPos) {
                this.setPosition(this.originPos.x, this.originPos.y)
                this.setDepth(0);
                this.currentPos = null;
            }
        })
    return target
}

// 判断当前偏移位置是否合适
function isTargetPosition(targetPos, currentPos, threshold) {
    return Math.abs(currentPos.x - targetPos.x) < threshold && Math.abs(currentPos.y - targetPos.y) < threshold
}